<template>
    <div class="we-protect">
        <header-model></header-model>
        <y-login></y-login>
        <y-register></y-register>
        <protect-list></protect-list>
        <back-top></back-top>
        <y-footer></y-footer>
    </div>
</template>

<script>

    import headerModel from '../common/headermodel'
    import YLogin from '../common/login'
    import YRegister from '../common/register'
    import protectList from '../components/protectList'
    import BackTop from '../common/backtop'
    import YFooter from '../common/footer'

    export default {
        components:{
            'header-model':headerModel,
            'y-login':YLogin,
            'y-register':YRegister,
            'protect-list':protectList,
            'back-top':BackTop,
            'y-footer':YFooter
        },
        mounted(){
            $('.nav-list ul li:nth-of-type(2) a').css('background','#48A864')
             $('.login').on('click',function(){
               $('.login-box').show()
           });
           $('.y-login .bgColor').on('click',function(){
              $('.register-box').show()
              $('.y-login').hide()
           });
           $('.y-register .bgColor').on('click',function(){
              $('.register-box').hide()
              $('.y-login').show()
           });
           $('.cancel').on('click',function(){
               $('.login-box').hide()
               $('.register-box').hide()
           })
           $('.skip').on('click',function(){
               $('.register-box').show()
              $('.y-login').hide()
           })
       }
    }
</script>

<style scoped>
*{
    min-width: 1200px;
}
    .we-protect{
        font-family: "Microsoft YaHei", 微软雅黑, MicrosoftJhengHei, 华文细黑, STHeiti, MingLiu;
        border:5px solid #f0f0f0;
        border-radius:3px;
    }
</style>